<template>
<h1>开关组件</h1>
<!-- 开关组件默认使用boolean类型来控制开关的true、false -->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  是否为管理员<el-switch v-model="is_admin"></el-switch>
  是否显示图片<el-switch v-model="is_show"></el-switch><br>
  <img src="fcq.jpg" v-if="is_show" width="200px">
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="num_str" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="num_str" active-value="1" inactive-value="0"></el-switch>
  <el-switch v-model="str_str" active-value="a" inactive-value="b"></el-switch>

</template>
<script setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const is_admin = ref(false)
const is_show = ref(false)
const num = ref(1)
const num_str = ref('1')
const str_str = ref('a')
</script>


<style scoped>

</style>